<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
   .a{
       height: 50px;
       background:aliceblue;
       margin: 20px;
   }
   .a span{
       float: left;
       margin-left:100px;
       margin-right:100px;
       line-height: 50px;   
   }
   .a ul li{
       float: left;
       margin-left:12px;
       line-height: 50px; 
       overflow: hidden;
       background: bisque;
       border-radius: 20px;
       }
    .a ul p{
        float: right;
        margin-right:20px ;
        line-height: 20px;
    }
    .b{
        height: 600px;
        width: 1200px;
        margin-left:auto;
        margin-right: auto;
        /*background: black; */
    }
    .b1{
        height: 600px;
        width: 900px;
        margin-right: 10px;
        background: aliceblue;
        float: left;
    }
    .b1 img{
        height: 600px;
        width: 900px;
    }
    .b1 .p1{
        position: absolute;
        left: 0px;
        bottom: 0px;
        background:rgba(0,0,0,0.3);
        height: 50px;
        width: 900px;
        margin-bottom:30px ;
        line-height: 50px;
        margin-left:161px; 
    }
    .b1 .p2{
        position: absolute;
        left: 0px;
        bottom: 0px;
        background:rgba(0,0,0,0.3);
        height: 30px;
        width: 100px;
        margin-bottom:95px ;
        line-height: 30px;
        margin-left:161px; 
        background: bisque;
    }
    .b2{
        height: 600px;
        width: 290px;
        /*background: azure;*/
        float:right;
    }
    .b2 ul li{
        position: relative;
        width: 290px;
        height: 190px;
        background:aliceblue;
        margin-bottom:25px ;
        margin-top:-14px; 
        float:right;
        overflow: hidden;
    }
    .b2 img{
        width: 290px;
        height: 190px;
    }
    .b2 p{
        position: absolute;
        left: 0px;
        bottom:-15px;
        background:rgba(0,0,0,0.3);
        height: 30px;
        width: 290px;
        line-height: 30px;
    }
    .b2 .p4{
        position: absolute;
        left: 0px;
        bottom: -15px;
        background:rgba(0,0,0,0.3);
        height: 30px;
        width: 290px;
        line-height: 30px;
    }
    .c{
        width: 1200px;
        height: 50px;
        margin-right:auto;
        margin-left:auto; 
        margin-top:20px; 
    }
    .c li{
        width: 130px;
                height: 33px;
                border:1px solid rgb(15, 10, 10);
                line-height: 33px;
                padding-left: 12px;
                float: left;
                margin-right: 15px;
                overflow: hidden;
            }
    .d{
    width: 1207px;
    height: 900px;
    margin-right:auto;
        margin-left:auto; 
    }
    .d ul li{
        width: 279px;
        height: 290px;
        margin-right: 10px;
        margin-bottom:10px ;
        background:aliceblue;
        float: left;
        overflow: hidden;
        position: relative;
    }
    .d img{
        position: absolute;
        top: 0px;
    }
    .d p{
        margin-top:219px; 
        position: absolute;
        margin-left: 5px;
        margin-right:5px ; 
    }
    .d span{
        margin-top:265px; 
        position: absolute;
        float: left;
        margin-left: 5px; 
    }
    .d i{
        margin-top:265px; 
        position: absolute;
        margin-right:20px ; 
        margin-left:156px;
    }
    .d b{
        margin-top:265px; 
        position: absolute;
        margin-right:20px ; 
        margin-left:240px; 
    }
    .e{
        width: 645px;
    height:50px;
    line-height: 50px;
    background:aliceblue;
    margin-right:auto;
    margin-left:auto;  
    padding-left:500px; 
    margin-bottom:20px; 
    }
    .f{
        width:1145px;
        height: 500px;
    margin-right:auto;
    margin-left:auto;  
    }
    .f1{
        width:1145px;
        height: 200px;
    }
    .f1 p{ 
        line-height: 200px;
        margin-left:65px;
    }
    .f2{
        width: 1145px;
        height: 100px;
    }
    .f2 li{
        float: left;
        overflow: hidden;
        margin-right:10px; 
    }
    .f3{
        width: 1145px;
        height: 200px;
        position: relative;
    }
    .f3 .p1{
        margin-left: 65px;
    }
    .f3 p{
      float: left;
      margin-right:10px; 
    }
    .g{
        height: 50px;
        background: black;
        margin-top:16px; 
    }
    .g p{
        float: left;
        margin-right:20px ;
        line-height: 19px;
        color: aliceblue;
    }
    .g .p1{
        float: left;
        margin-right:20px ;
        line-height: 19px;
        color: aliceblue;
        margin-left:20px; 
    }
    .bj{
        background: #e3e8ec;
    }
</style>
<body><div class="bj">
    <div class="a">
        <span>三</span>
        <ul>
            <li>赞</li><li>萌</li><li>哈</li><li>艹</li><li>买</li><p>登录</p>
        </ul>
    </div>
   <div class="b">
       <div class="b1"><img src="s003.jpg" alt=""><p class="p1">Brand 100: 设计成就品牌</p><p class="p2">系列专题报道</p></div>
       <div class="b2"><ul>
           <li><img src="s02.jpg" alt=""><p>想点亮圣诞气氛？试试这个【驯鹿】灯</p></li>
           <li><img src="s03.jpg" alt=""><p>Desugner 100: 100个设计师，100个故事</p></li>
           <li><img src="s04.jpg" alt=""><p class="p4">旧椅子获新生，还比以前更炫酷了</p></li>
       </ul></div> </div>
        <div class="c">
            <ul>
                <li>最新</li><li>最热</li><li>热议</li><li>随机</li>
            </ul>
        </div>
    <div class="d">
        <ul>
            <li><img src="i01.jpg" alt=""><p>用水才能擦去笔迹，它只想保护好设计师的创意</p><span>2小时前</span><i>122</i><b>2</b></li>
            <li><img src="i02.jpg" alt=""><p>马桶也要有优雅的姿态</p><span>3小时前</span><i>108</i><b>7</b></li>
            <li><img src="i03.jpg" alt=""><p>健身也是【科技范】，你以为仅仅只是个瑜伽垫？</p><span>16小时前</span><i>407</i><b>11</b></li>
            <li><img src="i04.jpg" alt=""><p>牙缝清洁怎么办？牙签牙线都过时了，用【刷子】刷吧</p><span>16小时前</span><i>640</i><b>16</b></li>
            <li><img src="i05.jpg" alt=""><p>矮怎么了？照样能够拿到书架顶端的书</p><span>18小时前</span><i>534</i><b>24</b></li>
            <li><img src="i06.png" alt=""><p> 这简直是一场关于肉体的盛宴，无关设计，时尚，无关商业</p><span>19小时前</span><i>1064</i><b>23</b></li>
            <li><img src="i07.png" alt=""><p>中国国际设计节PK世界工业设计大会，哪个更棒</p><span>20小时前</span><i>402</i><b>10</b></li>
            <li><img src="i07.jpg" alt=""><p>首届世界工业设计大会开在家门口杭州，中国设计师们躁起来</p><span>23小时前</span><i>303</i><b>9</b></li>
            <li><img src="i08.jpg" alt=""><p>窝在北方的暖炉里，你应该需要这样一个散热门阀？</p><span>1天前</span><i>479</i><b>11</b></li>
            <li><img src="i09.jpg" alt=""><p>废纸打造的铅笔，像是一朵朵落入凡间的花</p><span>2天前</span><i>533</i><b>34</b></li>
            <li><img src="i10.jpg" alt=""><p>倚靠在毯子上，这件事听着就让人舒坦</p><span>2天前</span><i>463</i><b>19</b></li>
            <li><img src="i11.jpg" alt=""><p>别笑话虚拟键盘没有实体按键，打字or音乐，它们说变就变</p><span>2天前</span><i>540</i><b>44</b></li>
        </ul>
   </div>
   <div class="e"><p>太快了吧，慢慢来^_^</p></div>
   <div class="f"><div class="f1"><p>合作伙伴</p></div>
   <div class="f2"><ul>
       <li><img src="x01.png" alt=""></li><li><img src="x02.png" alt=""></li><li><img src="x03.png" alt=""></li><li><img src="x04.png" alt=""></li><li><img src="x05.png" alt=""></li><li><img src="x06.png" alt=""></li><li><img src="x07.png" alt=""></li>
   </ul>
</div>
<div class="f3"><p class="p1">友情链接</p><br><br><br><p>DRC北京工业设计创意产业基地</p><p>|</p><p>中国工业设计协会</p><p>|</p><p>设计邦</p><p>|</p><p>网易家居</p><p>|</p><p>智东西</p><p>|</p><p>一网空间</p><p>|</p><P>七牛云储存</P><p>|</p><p>高清图片</p><p>|</p><p>Fotor</p></div>
</div>
<div class="g"><p class="p1">关于</p><p>|</p><p>合作</p>|<p>投稿</p><p>|</p><P>工业设计导航</P><p>|</p><p>站点地图</p></div>
</div></body>
</html>